<template>
    <!-- 转派 -->
    <div class="order_content_detail">
      <div class="tabs">
        <div style="display: flex; width: 46%">
          <div class="active">工单转派</div>
        </div>
      </div>
      <div class="tabs_contents" >
      <div class="item_content" v-for="(item, indexs) in ryLists" :key="indexs">
        <div class="content">
          <img src="./img/icon_ry.png" alt="" width="26" height="26" />
          <div class="detail">
            <div class="top">
              <div class="name">{{ item.realName }}</div>
              <div class="flex">
                <div class="phone">
                  <img src="./img/icon_zjgcs.png" alt="" width="16" height="16" />
                  <div>{{ item.post }}</div>
                </div>
                <div class="phone">
                  <img src="./img/icon_dh.png" alt="" width="16" height="16" />
                  <div>{{ item.phone }}</div>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title">在途工单量</div>
              <div class="tiele_content">
                <div class="label">装移修：</div>
                <div class="value">{{ item.zyxOrderNum }}</div>
              </div>
              <div class="tiele_content">
                <div class="label">直派：</div>
                <div class="value">{{ item.zpOrderNum }}</div>
              </div>
              <div class="tiele_content">
                <div class="label">服务：</div>
                <div class="value">{{ item.fwOrderNum }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 选中 -->
        <img
          width="16"
          height="16"
          :src="selectOrder == indexs ? require('./img/dx_pr.png') : require('./img/icon_btg.png')"
          alt=""
          @click="onSelectItem(item, indexs)"
        />
      </div>
    </div>
      <div class="reason">
        <div class="reason_title">转派理由</div>
        <van-field v-model="suggestion" rows="2" autosize type="textarea" placeholder="请输入转派理由" show-word-limit />
      </div>
      <div class="btns">
        <van-button type="default" @click="onRest">重置</van-button>
        <van-button type="info" @click="onSubmit" :loading="laodingBtn" loading-text="提交中...">提交</van-button>
      </div>
    </div>
  </template>
          
    <script>
  import store from '@/store/'
  import { mapState } from 'vuex'
  
  import { personnelDispatch} from '@/api/publicline/orderDispatch.js'
  import {submitUrl } from '@/api/publicline/todoread.js'
  import { Toast } from 'vant'
import Vue from 'vue'
  
  export default {
    name: 'dialogPerson',
    props: {
      content: Object,
    },
    data() {
      return {
        // active: 0,
        ryLists: [],
        loading: false,
        finished: false,
        refreshing: false,
        selectItem: false,
        suggestion: null,
        gridCode: null,
        gridName: null,
        records: null,
        pageNum: 1,
        pageSize: 10,
        laodingBtn:false
      }
    },
    computed: {
      ...mapState({
        // 后台菜单
        selectOrder: (state) => state.todoread.selectOrder,
      }),
    },
  
    mounted() {
    this.gridCode = localStorage.getItem('$gridId')

      this.getPersonnel()
    },
    methods: {
      onSelectItem(item, indexs) {
        store.commit('SET_SELECTORDER', indexs)
        this.records = item
      },
      getPersonnel() {
      personnelDispatch({ gridCode: this.gridCode })
        .then((res) => {
          this.ryLists = res.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
      getGridDispatch() {
        let params = {
          gridCode: this.gridCode,
          gridName: this.gridName,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
        this.loading = true
  
        gridDispatch({ ...params })
          .then((res) => {
            this.yfLists.push(...res.result.list)
            this.loading = false
            this.finished = res.result.list.length < this.pageSize
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
          .finally(() => {
            this.loading = false
          })
      },
      onRest() {
        store.commit('SET_SELECTORDER', null)
        this.records = null
      },
      onSubmit() {
        if (!this.records) {
          Toast('请选择列表项')
          return
        }
        let params = {
        orderId: this.content.id,
        operationType: 1,
        newUserId: this.records.username,
      }
        this.laodingBtn=true
        submitUrl({ ...params })
          .then((res) => {
            if(res.code==1){
              this.$emit('reload')
              this.laodingBtn=false
              Toast(res.message)
            }else{
              Toast(res.message)
            }
          })
          .catch((err) => {
            this.laodingBtn=false
            Toast(err.message)
          })
          .finally(() => {
            this.laodingBtn = false
          })
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false
  
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true
        this.onLoad()
      },
    },
  }
  </script>
    <style lang="less" scoped>
  //   .order_content_detail{
  //     height: 200px;
  //   }
  .tabs {
    height: 30px;
    margin: 10px;
    display: flex;
    border-bottom: 1px solid #eeeeee;
    margin: 12px;
    padding-bottom: 34px;
    div {
      width: 100px;
      height: 24px;
      font-size: 16px;
      color: #333333;
      position: relative;
      text-align: center;
    }
    .active::before {
      content: '';
      width: 16px;
      height: 2px;
      position: absolute;
      // bottom: -2px;
      bottom: -4px;
      // left: 44px;
      left: 32px;
      background-color: #4d98ff;
      border: 1px solid #4d98ff;
      //   border-radius: 20px;
    }
    .active {
      font-family: PingFangSC-Medium;
      color: #4d98ff;
  
      // border-bottom-width: 2px; /* 设置底部边框宽度为2px */
      // border-bottom-style: solid; /* 设置底部边框样式为实线 */
    }
  }
  .tabs_contents {
    max-height: 300px;
    overflow-y: auto;
    .item_content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e6e6e6;
    }
    .content {
      display: flex;
      align-items: center;
      margin-left: 10px;
      width: 90%;
      .detail {
        .top {
          display: flex;
          margin-left: 10px;
          margin-bottom: 6px;
          .name {
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #333333;
            font-weight: bold;
            margin-right: 8px;
            min-width: 50px;
          }
          .flex {
            display: flex;
            background: rgba(77, 152, 255, 0.1);
            .phone {
              display: flex;
              // height: 24px;
              // line-height: 24px;
              font-size: 12px;
              color: #4d98ff;
              // background: rgba(77, 152, 255, 0.1);
              border-radius: 4px;
              padding: 0 10px;
              position: relative;
              &:nth-child(odd) {
                &::before {
                  content: '';
                  width: 1px;
                  height: 12px;
                  position: absolute;
                  bottom: 30%;
                  left: 100%;
                  // bottom: 5px;
                  // left: 0;
                  // background-color: #4d98ff;
                  border: 1px solid #4d98ff;
                }
                // border-left: 1px solid red;
              }
            }
          }
        }
        .phones {
          height: 24px;
          line-height: 24px;
          font-size: 12px;
          color: #4d98ff;
          background: rgba(77, 152, 255, 0.1);
          border-radius: 4px;
          padding: 0 10px;
        }
        .bottom {
          display: flex;
          align-items: center;
          margin-left: 10px;
          font-size: 12px;
          color: #666666;
          .title {
            font-size: 12px;
            color: #666666;
            background: linear-gradient(20deg, #bbe4f3 0%, #e3ebeec4 30%);
          }
          .tiele_content {
            display: flex;
            align-items: center;
            margin-left: 6px;
            .label {
              font-size: 12px;
              color: #999999;
            }
            .value {
              font-size: 12px;
              color: #000;
            }
          }
        }
      }
    }
  }
  .reason {
    margin-left: 20px;
    padding-top: 14px;
  }
  .btns {
    display: flex;
    margin-bottom: 10px;
  }
  /deep/ .van-field__body {
    background: rgba(77, 152, 255, 0.04);
  }
  /deep/ .van-button {
    width: 46%;
    margin: 10px;
    border-radius: 10px;
  }
  /deep/ .van-button--default {
    background: #f0f0f0;
  }
  </style>
          